<template>
  <div class="page-container" style="height: auto">
      <div class="in-container" style="height: auto">
          <el-tabs
              v-model="tabActive"
              @tab-click="tabClick"
              type="card"
              style="margin-bottom: 8px">
              <el-tab-pane name="inReconciled" label="应收"></el-tab-pane>
              <el-tab-pane name="outReconciled" label="应付"></el-tab-pane>
          </el-tabs>
          <UnReconciled :DocType="1" v-if="tabActive == 'inReconciled'"></UnReconciled>
          <UnReconciled :DocType="0" v-if="tabActive == 'outReconciled'"></UnReconciled>
      </div>
  </div>
</template>

<script setup>
import UnReconciled from './components/UnReconciled.vue'
import { defineComponent, ref } from 'vue'

const tabActive = ref('inReconciled')
</script>

<style lang="scss" scoped>
:deep(.in-container .el-tabs--card > .el-tabs__header) {
  border-bottom: 1px solid var(--el-border-color-light) !important;
}
</style>
